<script setup>
import {Edit} from "@element-plus/icons-vue";

import {computed, onMounted} from "vue";

import {storeToRefs} from "pinia";
import {useUserStore} from '@/stores/UserStores.js'

const UserStore = useUserStore()
const {classTable, submitId} = storeToRefs(UserStore)
const {updateTable, getTable} = UserStore

const updateTableClass = (x, y) => {
  updateTable(submitId, x, y)
}

const classHour = ['第一、二节课', '第三、四节课', '第五、六节课', '第七、八节课', '第九、十节课'];

const columns = ["课程表", "星期一", "星期二", "星期三", "星期四", "星期五"].map((label, idx) => ({
  label,
  prop: label,
  width: !idx ? 150 : void 0
}))

const data = computed(() => {
  return (classTable.value ?? []).map((item, index) => {
    return {
      '课程表': classHour[index],
      '星期一': item[0],
      '星期二': item[1],
      '星期三': item[2],
      '星期四': item[3],
      '星期五': item[4]
    }
  })
});

onMounted(() => {
  getTable(submitId.value)
})

</script>

<template>
  <div>
    <el-table :data="data" border stripe v-if="!!classTable">
      <template v-for="(item, idx) in columns" :key="item.label">
        <el-table-column align="center" :label="item.label" :prop="item.prop" :width="item.width">
          <template #default="{ row, $index }">
            <template v-if="item.prop !== columns[0].prop">
              <!--              <el-button link @click="updateTableClass(idx - 1, $index)" :icon="Edit">{{ classTable[idx - 1][$index] }}</el-button>-->
              <el-button link @click="updateTableClass($index, idx - 1)" :icon="Edit">{{ row[item.prop] }}</el-button>
            </template>
            <template v-else>
              {{ row[item.prop] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<style scoped>

</style>